<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>一农</title>
    <meta
      name="viewport"
      content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    />
    <link rel="stylesheet" href="assets/mui/css/mui.min.css" />
    <link rel="stylesheet" href="assets/font/iconfont.css" />
    <link rel="stylesheet" href="css/base.css" />
    <script src="assets/mui/js/mui.min.js"></script>
    <script src="assets/zepto/zepto.min.js"></script>
    <script src="assets/artTemplate/template-native.js"></script>
    <script src="js/public.js"></script>
    <script src="js/video.js"></script>
    <style>
      .video-cont {
        width: 100vw;
        height: 56vw;
      }

      .video-cont video {
        width: 100%;
        height: 100%;
      }

      .video-title {
        padding: 10px;
        text-align: center;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
      }

      .video-notes {
        padding: 10px;
        box-shadow: rgba(0, 0, 0, 0.2) 0 1px 5px 0px;
      }

      .video-notes p:nth-child(1) {
        font-size: 15px;
        padding-bottom: 10px;
      }

      .video-notes p:nth-child(1) span {
        font-size: 16px;
        padding-bottom: 4px;
        color: black;
      }

      .video-notes p:nth-child(2) {
        font-size: 15px;
      }

      .video-notes p:nth-child(2) span {
        font-size: 16px;
        padding-bottom: 4px;
        color: black;
      }

      .video-view {
        padding: 10px;
      }

      .video-view .video-view-title span:nth-child(1) {
        color: #59c38b;
        font-weight: 800;
        height: 30px;
        line-height: 30px;
      }

      .video-view .video-view-title span:nth-child(2) {
        font-weight: 700;
        color: black;
        height: 30px;
        line-height: 30px;
        padding-left: 10px;
      }

      .video-view .video-view-cont {
        display: flex;
        justify-content: start;
        padding: 10px 0;
      }

      .video-view .video-view-cont img:nth-child(1) {
        width: 10vw;
        height: 10vw;
      }

      .video-view .video-view-cont .cont:nth-child(2) {
        padding-left: 10px;
        flex: 1;
      }

      .video-view .video-view-cont .cont:nth-child(2) .view-name {
        color: black;
        font-weight: 600;
      }

      .video-view .video-view-cont .cont:nth-child(2) .view-txt {
        margin-top: 5px;
        font-size: 18px;
      }

      .video-view .video-view-cont img:nth-child(3) {
        width: 4vw;
        height: 4vw;
        margin-top: 5px;
      }

      .video-blank {
        text-align: center;
        margin: 20px;
        color: red;
      }
    </style>
  </head>
  <body>
    <header class="mui-bar mui-bar-nav my-header">
      <a class="mui-icon mui-icon-back mui-pull-left" href="more.html"></a>
      <h1 class="mui-title">专家视频</h1>
    </header>
    <nav class="mui-bar mui-bar-tab my-footer">
      <a class="mui-tab-item" href="index.html">
        <span class="mui-icon iconfont icon-fuwuzhongjiewuye my-icon"></span>
        <span class="mui-tab-label">首页</span>
      </a>
      <a class="mui-tab-item" href="manage.html">
        <span class="mui-icon iconfont icon-shengchangzhouqi my-icon"></span>
        <span class="mui-tab-label">数据</span>
      </a>
      <a class="mui-tab-item" href="equipment.html">
        <span class="mui-icon iconfont icon-shebei my-icon"></span>
        <span class="mui-tab-label">服务</span>
      </a>
      <a class="mui-tab-item" href="login.html">
        <span class="mui-icon iconfont icon-wode my-icon"></span>
        <span class="mui-tab-label">我的</span>
      </a>
    </nav>
    <div class="mui-content" id="contAll"></div>

    <script type="text/template" id="tem">
      <%if(res=='1'){%>
        <div class="video-cont">
          <video controls poster="./images/post1.jpg">
            <source src="./images/video1.mp4" type="video/mp4" />
            您的浏览器暂不支持视频播放
          </video>
        </div>
        <h3 class="video-title">
          聚谷氨酸的农业作用及其作用机理的分析
        </h3>
        <div class="video-notes">
          <p>
            <span>什么是聚谷氨酸:</span><br />
            聚谷氨酸是谷氨酸的一个聚合物, 也就是有1万到2万个谷氨酸穿成一串,
            组成一种新的物质, 即聚谷氨酸. 它是一种可食用型的肥料添加剂.
          </p>
          <p>
            <span>聚谷氨酸的功效:</span><br />
            添加聚谷氨酸后, 可以提高八个点的肥料利用率.
            比如40%的肥料加完聚谷氨酸后可以起到48%的功效,
            45%的肥料加完聚谷氨酸后可以起到53%的功效.
            聚谷氨酸可以形成10%~25%的增产幅度.
          </p>
        </div>
        <div class="video-view">
          <div class="video-view-title"><span>|</span><span>观点</span></div>
          <div class="video-view-cont">
            <img src="./images/avatar.png" alt="" />
            <div class="cont">
              <div class="view-name">匿名</div>
              <div class="view-txt">老师讲的很详细 赞!!!</div>
            </div>
            <img src="./images/like1.png" alt="" class="like" />
          </div>
          <div class="video-view-cont">
            <img src="./images/avatar.png" alt="" />
            <div class="cont">
              <div class="view-name">匿名</div>
              <div class="view-txt">很有帮助, 谢谢老师了!~</div>
            </div>
            <img src="./images/like1.png" alt="" class="like" />
          </div>
        </div>
        <%}else if(res=='2'){%>
          <div class="video-cont">
            <video controls poster="./images/post2.jpg">
              <source src="./images/video2.mp4" type="video/mp4" />
              您的浏览器暂不支持视频播放
            </video>
          </div>
          <h3 class="video-title">
            葡萄的春季管理要点
          </h3>
          <div class="video-notes">
            <p>
              <span>1.春季葡萄需要补水</span><br />
              春季葡萄补水后, 葡萄牙更加饱满, 出芽更整齐.
            </p>
            <p>
              <span>2.注意防治病害问题</span><br />
              由于倒春寒天气, 春季湿度较大, 温度较低, 葡萄容易出现霜霉病, 黑痘病,
              灰霉病. 防治主要措施是增加太抗-几丁, 使葡萄树体更加健壮, 促进花芽分化.
              化学农药和生物农药套着使用, 效果更佳.
            </p>
          </div>
          <div class="video-view">
            <div class="video-view-title"><span>|</span><span>观点</span></div>
            <div class="video-view-cont">
              <img src="./images/avatar.png" alt="" />
              <div class="cont">
                <div class="view-name">匿名</div>
                <div class="view-txt">专家果然经验丰富, 学习了~</div>
              </div>
              <img src="./images/like1.png" alt="" class="like" />
            </div>
            <div class="video-view-cont">
              <img src="./images/avatar.png" alt="" />
              <div class="cont">
                <div class="view-name">匿名</div>
                <div class="view-txt">很不错哈</div>
              </div>
              <img src="./images/like1.png" alt="" class="like" />
            </div>
          </div>
          <%}else{%>
            <div class="video-blank">暂无视频可播放</div>
            <%}%>
    </script>
  </body>
</html>
